<template>
    <!-- <a-drawer title="项目立项申请" :width="800" :visible="isShow" :body-style="{ paddingBottom: '80px' }" placement="right"
        :footer-style="{ textAlign: 'right' }" @close="onClose(false)"> -->

    <a-form ref="formRef" :model="form" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
        autocomplete="off">
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目类型" name="type" :rules="[{ required: true }]">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" placeholder="请选择项目类型" :disabled="isShow" v-model:value="form.type" style="width: 100%"
                        :options="xmtypes">
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目名称" name="name" :rules="[{ required: true }]">
                    <a-input v-model:value="form.name" :disabled="disabled" style="width: 100%" placeholder="请输入项目名称" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目编号" name="code">
                    <a-input v-model:value="form.code" disabled style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="预计投标日期" name="bidExpectTime" :rules="[{ required: true }]">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.bidExpectTime" style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="客户名称" name="custom" :rules="[{ required: true }]">
                    <a-input v-model:value="form.custom" :disabled="disabled" style="width: 100%" placeholder=""
                        @click="showCustomerSelect" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目工期" name="durationExpect" :rules="[{ required: true }]">
                    <a-input-number :disabled="disabled" v-model:value="form.durationExpect" style="width: 100%"
                        placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="暂估合同额" name="esAmount" :rules="[{ required: true }]">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.esAmount"
                        style="width: 100%" suffix="元" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目主要联系人" name="proContacts">
                    <a-input v-model:value="form.proContacts" :disabled="disabled" style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>

        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="投标类型" name="bidType">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" placeholder="请选择" :disabled="disabled" v-model:value="form.bidType" style="width: 100%"
                        :options="tbtypes"></a-select>

                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="联系方式" name="contactPhone">
                    <a-input v-model:value="form.contactPhone" :disabled="disabled" style="width: 100%"
                        placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>

        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="负责人" name="directorName">
                    <!-- <a-select :getPopupContainer="trigger => trigger.parentNode" placeholder="请选择" v-model:value="form.director" style="width: 100%"></a-select> -->
                    <a-input v-model:value="form.directorName" :disabled="disabled" @click="showUserSelect()"
                        style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="附件" name="files" :rules="[{ required: true, message: '请上传附件' }]">
                    <fileUpload @uploadDone="uploadDone" :isShow="disabled" :files="form.files" ref="uploadRef"
                        :uploadNumber="4">
                    </fileUpload>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="项目内容" name="content">
                    <a-textarea v-model:value="form.content" :disabled="disabled" :rows="4" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="人员要求" name="req">
                    <a-textarea v-model:value="form.req" :disabled="disabled" :rows="4" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="资金要求" name="amountReq">
                    <a-textarea v-model:value="form.amountReq" :disabled="disabled" :rows="4" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>


        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="工期进度" name="sechdule">
                    <a-textarea v-model:value="form.sechdule" :disabled="disabled" :rows="4" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="备注" name="remark">
                    <a-textarea v-model:value="form.remark" :disabled="disabled" :rows="4" placeholder=""
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>



        <system :value="form"></system>

    </a-form>

    <!-- <template #extra>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onClose">保存</a-button>
            </a-space>
        </template> -->
    <!-- <template #footer>
            <a-button type="primary" @click="submit()">保存</a-button>
            <a-button style="margin-left: 10px" @click="onClose(false)">取消</a-button>
        </template> -->
    <!-- </a-drawer> -->

    <userSelectorPlus ref="userSelectorRef" @OnClose="userSelectorOk"></userSelectorPlus>
    <customerSelect ref="customerSelectRef" @OnClose="customerSelectOk" :value="form.customId"></customerSelect>

</template>

<script setup>
import system from '@/components/Task/system.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlusExtend.vue'
import customerSelect from '@/components/pm/customSelection.vue'
import fileUpload from '@/components/JqUpload/index.vue'

import pmApi from '@/api/pm/pm/index'
import { xmtypes, tbtypes } from '@/utils/constants.js'
const form = ref({

});
const formRef = ref(null)

const customerSelectRef = ref()
const showCustomerSelect = () => {
    customerSelectRef.value.show("")
}
const customerSelectOk = (data) => {
    form.value.custom = data[0].custName
    form.value.customId = data[0].id
}
const uploadDone = (result) => {
    console.log("uploadDone", result)
    form.value.files = result
}

const isShow = ref(false)

const userSelectorRef = ref()
const showUserSelect = () => {
    userSelectorRef.value.show("")
}
const userSelectorOk = (data) => {
    form.value.directorName = data.value.directorName
    form.value.director = data.value.directorId
}


const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    isShow.value = false;
    form.value = {};
    emits('OnClose', refresh)
};

const show = (data) => {
    isShow.value = true
    if (data) {

        form.value = { ...data }
    } else {
        form.value = {};
    }
}


const handleFinish = (values) => {
    console.log("handleFinish", values);
    if (!form.value.id) {
        pmApi.proinfoadd(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        pmApi.proinfoedit(values).then(() => {
            onClose(true);
        })
    }
};


const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    },
})
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
            if (form.value.name) {
                isShow.value = true
            } else {
                isShow.value = false
            }
        }
    },
    { deep: true, immediate: true }
)

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.flowCode = "FLW_PROINFO"
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}
defineExpose({
    getData,
    resetForm,
    show
})

</script>